<template>
  <div class="scroll-table-container">
    <table
      id="my-table"
      class="table2 scroll-table"
      width="100%"
      cellspacing="0"
      cellpadding="0"
    >
      <thead class="table-header">
        <tr class="header">
          <th
            v-for="_columns in columns"
            :key="_columns.key"
            :style="getHeaderStyle(_columns)"
          >
            {{ _columns.label }}
          </th>
        </tr>
      </thead>
      <tbody class="table-tbody">
        <tr v-for="(item, index) in dataSource" :key="index" class="row">
          <th
            v-for="(col, clIdx) in columns"
            :key="`${col.key + clIdx}`"
            :style="getHeaderStyle(col)"
          >
            <slot :name="col.key" v-bind="{ row: item, $index: index }">
              {{ getVal(item, col.key) }}
            </slot>
          </th>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash-es'
import { getVal } from '@/utils'

export default {
  name: 'ScrollTable',
  props: {
    /*
          key: string
          label: string
          width: string
      */
    columns: {
      type: Array,
      required: true
    },
    /* 预留，暂不处理 */
    http: Function,
    params: Object,
    /* 存在 */
    dataSource: Array,
    // 当数据大于指定长度，才会去滚动
    maxLength: {
      type: Number,
      default: 9
    }
  },
  data() {
    return {
      timer: null,
      data: []
    }
  },
  watch: {
    dataSource: {
      handler() {
        this.data = cloneDeep(this.dataSource)
        this.$nextTick(() => {
          if (this.data.length >= this.maxLength) {
            document.querySelector('.table-tbody').classList.add('tb')
          } else {
            document.querySelector('.table-tbody').classList.remove('tb')
          }
        })
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    getVal,
    getHeaderStyle(_columns) {
      return _columns.width ? `width: ${_columns.width}` : 'flex: 1'
    }
  }
}
</script>

<style lang="scss" scoped>
$scroll_speed: 10s;
$tr_td_height: 46px;

.scroll-table-container {
  width: 100%;
  height: 430px;

  .scroll-table {
    width: 100%;
    height: 100%;
    position: relative;

    .table-header {
      position: sticky;
      top: 0;
      z-index: 1;
      line-height: 2;
      color: #fff;
      th {
        height: $tr_td_height;
      }
      .header {
        display: flex;
        th {
          background-color: #113e79;
          padding-left: 10px;
          display: flex;
          align-items: center;
        }
      }
    }

    .table-tbody {
      color: #fff;
      width: 100%;
      display: flex;
      flex-direction: column;
      tr {
        flex: 1;
        display: flex;
        th {
          height: $tr_td_height;
          padding-left: 10px;
          display: flex;
          align-items: center;
        }
      }
    }
  }

  @keyframes scroll {
    0% {
      top: 45px;
    }

    100% {
      top: -10.5%; /*该top可根据表格内容区高度自行调整，保证动画丝滑*/
    }
  }

  .scroll-table .tb {
    position: absolute;
    top: 45px;
    animation: scroll 3s linear infinite;
  }

  .table2 tbody:hover {
    animation-play-state: paused; /* 鼠标移过去就暂停滚动，松开继续滚动 */
  }
  .table2 table-tbody tr:hover {
    cursor: pointer;
    background-color: #021455;
  }
  th {
    font-size: 0.16rem;
  }
}

.scroll-table-container::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.scroll-table-container {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
